<template>
  <div>
    <el-upload
        class="upload-demo"
        action="http://localhost:8100/service/SysFactory/import"
        multiple
        :limit="3"
        accept=".xls,.xlsx">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="150px">
      <el-form-item label="工厂名称">
        <el-input v-model="formInline.factoryName" placeholder="工厂名称" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
        <el-button type="primary" @click="exFactory('formInline')">导出</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            plain
            size="mini"
            type="primary"
            @click="openadd"
            icon="el-icon-plus"
            v-hasPermi="['service:SysFactory:FactoryAdd']"
        >添加</el-button>
      </el-col>
    </el-row>

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="factoryId"
          label="工厂ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="factoryCode"
          label="工厂序号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="factoryName"
          label="工厂的名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cityName"
          label="省/市/区"
          width="200">
        <template v-slot="r">
          {{r.row.provinceName}} -- {{r.row.districtName}} -- {{r.row.cityName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="factorySort"
          label="工厂的排序"
          width="130">
      </el-table-column>
      <el-table-column
          prop="factoryFounder"
          label="创建人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="factoryCreationTime"
          label="创建时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="factoryPeoPle"
          label="联系人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="联系人电话"
          width="120">
      </el-table-column>
      <el-table-column
          prop="factoryRemark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column
          prop="cropName"
          label="农作物"
          width="120">
      </el-table-column>
      <el-table-column
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image
              style="width: 100px; height: 100px"
              :src="s.row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="FactoryDelete(scope.row.factoryId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        :total="total">
    </el-pagination>

    <el-button @click="initChart" type="primary">展开折线图</el-button>
    <div>
      <div id="main" style="height: 300px;width: 500px"></div>
    </div>

    <el-dialog :title="title"  :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="ruleForm">
        <el-form-item label="工厂编号" prop="factoryCode">
          <el-input v-model="addForm.factoryCode"></el-input>
        </el-form-item>
        <el-form-item label="工厂名称" prop="factoryName">
          <el-input v-model="addForm.factoryName"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader
              v-model="addForm.cascaderValue"
              :options="options"
              :props="props"
              @change="getchange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="工厂的排序" prop="factorySort">
          <el-input-number v-model="addForm.factorySort" controls-position="right" :min="1" :max="9"></el-input-number>
        </el-form-item>
        <el-form-item label="创建人" prop="factoryFounder">
          <el-input v-model="addForm.factoryFounder"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="factoryPeoPle">
          <el-input v-model="addForm.factoryPeoPle"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="factoryPhone">
          <el-input v-model="addForm.factoryPhone"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="factoryRemark">
          <el-input v-model="addForm.factoryRemark"></el-input>
        </el-form-item>
        <el-form-item label="农作物名称">
          <el-select v-model="addForm.cropId" placeholder="请选择农作物">
            <el-option
                v-for="item in opt"
                :key="item.cropId"
                :label="item.name"
                :value="item.cropId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/service/SysFactory/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">提交</el-button>
      </div>
    </el-dialog>


    <el-dialog title="工厂修改"  :visible.sync="updateFormVisible">
      <el-form :model="updateForm" :rules="rules" ref="ruleForm">
        <el-form-item label="工厂编号" >
          <el-input v-model="updateForm.factoryCode"></el-input>
        </el-form-item>
        <el-form-item label="工厂名称" >
          <el-input v-model="updateForm.factoryName"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" :label-width="formLabelWidth">
          <el-cascader
              v-model="areaIds"
              :options="options"
              :props="props"
              @change="areaChange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="工厂的排序" >
          <el-input-number v-model="updateForm.factorySort" controls-position="right" :min="1" :max="9"></el-input-number>
        </el-form-item>
        <el-form-item label="创建人" >
          <el-input v-model="updateForm.factoryFounder"></el-input>
        </el-form-item>
        <el-form-item label="联系人" >
          <el-input v-model="updateForm.factoryPeoPle"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" >
          <el-input v-model="updateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="updateForm.factoryRemark"></el-input>
        </el-form-item>
        <el-form-item label="农作物名称">
          <el-select v-model="updateForm.cropId" placeholder="请选择农作物">
            <el-option
                v-for="item in opt"
                :key="item.cropId"
                :label="item.name"
                :value="item.cropId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/service/SysFactory/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :befor-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SysFactory",
  data(){
    return{
      areaIds:[],
      imageUrl:'',
      opt:[],
      title: '添加工厂',
      formInline:{},
      total:0,
      pageSize:4,
      pageNum:1,
      tableData:"",
      dialogFormVisible:false,
      addForm:{
        cascaderValue: []
      },
      options: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      updateFormVisible:false,
      updateForm:{
        updatecascaderValue: [],
      },

      formLabelWidth:'120px',
      x:[],
      y:[],
      rules: {
        factoryCode: [
          { required: true, message: '请输入工厂序号', trigger: 'change' }
        ],
        factoryName: [
          { required: true, message: '请输入工厂名称', trigger: 'blur' },
        ],
        xid: [
          { required: true, message: '请输入工厂所在省', trigger: 'change' }
        ],
        sid: [
          { required: true, message: '请输入工厂所在市', trigger: 'change' }
        ],
        qid: [
          { required: true, message: '请输入工厂所在区', trigger: 'change' }
        ],
        factoryAddress: [
          { required: true, message: '请输入工厂详细地址', trigger: 'change' }
        ],
        factorySort: [
          { required: true, message: '请输入工厂排序', trigger: 'change' }
        ],
        factoryPhone: [
          { required: true, message: '请输入联系人电话', trigger: 'change' }
        ],
      }
    }
  },
  methods:{
    areaChange(value){
      this.updateForm.xid=value[0];
      this.updateForm.sid=value[1];
      this.updateForm.qid=value[2];
    },
    list(){
      this.axios.post("/service/SysFactory/FactoryList?pageSize="+this.pageSize+"&pageNum="+this.pageNum,this.formInline).then(r=>{
        this.tableData=r.data.data.list
        this.total=r.data.data.total
      })
    },
    handleCurrentChange(newPage){
      this.pageNum=newPage;
      this.list()
    },
    resetForm() {
      window.location.reload()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i = 0; i < val.length; i++) {
        this.ids[i]=val[i].roleId;
      }
      this.single=val.length!=1;
      this.multiple=!val.length;
    },
    openadd(){
      this.gettype();
      this.dialogFormVisible=true;
      this.addForm={factorySort:'1'}
    },
    add(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/service/SysFactory/FactoryAdd",this.addForm).then(r=>{
            console.log(this.addForm.roleId)
            if (r.data.code==200){
              this.dialogFormVisible=false;
              this.$message.success(r.data.msg)
              this.list();
            }else {
              this.$message.error(r.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    update(){
      this.axios.post("/service/SysFactory/FactoryUpdate",this.updateForm).then(r=>{
        if (r.data.code==200){
          this.updateFormVisible=false;
          this.$message.success(r.data.msg)
          this.list();
        }else {
          this.$message.error(r.data.msg)
        }
      })
    },
    openUpdate(row){
      this.gettype();
      this.areaIds=[]
      this.updateForm = row
      if (row.xid){
        this.areaIds.push(row.xid,row.sid,row.qid)
      }
      console.log(this.areaIds)
      this.updateFormVisible=true;
      this.imageUrl=row.avatar
      this.updateForm.cropId=this.updateForm.cropName
    },
    gettype() {
      this.axios.post("/service/SysFactory/gettype").then(res => {
        this.options = res.data.data;
      });
    },
    FactoryDelete(factoryId){
      this.axios.post("/service/SysFactory/FactoryDelete?factoryId="+factoryId).then(r=>{
        if (r.data.code==200){
          this.$message.success(r.data.msg)
          this.list();
        }else {
          this.$message.error(r.data.msg)
        }
      })
    },
    getchange(id){
      console.log(id);
      if (id.length > 0) {
        this.addForm.xid = id[0];
        this.addForm.sid = id[1];
        this.addForm.qid = id[2];
      } else {
        this.addForm.provinceId = '';
      }
    },
    crop(){
      this.axios.post("/service/SysFactory/cropList").then(r=>{
        this.opt=r.data.data;
      })
    },
    exFactory(){
      window.location.href=this.axios.defaults.baseURL+"service/SysFactory/exFactory";
    },
    handleAvatarSuccess(res,file){
      this.imageUrl=URL.createObjectURL(file.raw)
      this.addForm.avatar=res
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    initChart(){
      this.axios.post("/service/SysFactory/selectFactoryCount").then(res=>{
        this.zxt=res.data.data;
        let xData = [];
        let yData = [];
        this.zxt.forEach(item => {
          xData.push(item.founder);
          yData.push(item.num);
          console.log(this.x);
          console.log(this.y);
        });
        this.x = xData;
        this.y= yData;
        var echarts = require('echarts');
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: this.x,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.y,
              type: 'line'
            }
          ]
        };
        console.log(this.x)
        console.log(this.y);
        option && myChart.setOption(option);
      })
    }
  },
  created() {
    this.list();
    this.crop();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>